<template>
  <div class="system-settings-container">
    <h1>系统设置</h1>
    
    <div class="settings-tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id" 
        @click="currentTab = tab.id" 
        :class="{ active: currentTab === tab.id }"
      >
        {{ tab.name }}
      </button>
    </div>
    
    <!-- 基本设置 -->
    <div v-if="currentTab === 'basic'" class="settings-panel">
      <h2>基本设置</h2>
      
      <div class="form-group">
        <label>系统名称</label>
        <input type="text" v-model="settings.basic.systemName">
      </div>
      
      <div class="form-group">
        <label>系统Logo</label>
        <div class="logo-upload">
          <img :src="settings.basic.logo" alt="系统Logo" class="logo-preview">
          <button class="upload-btn">上传Logo</button>
        </div>
      </div>
      
      <div class="form-group">
        <label>系统描述</label>
        <textarea v-model="settings.basic.description"></textarea>
      </div>
      
      <div class="form-group">
        <label>版权信息</label>
        <input type="text" v-model="settings.basic.copyright">
      </div>
      
      <div class="form-group">
        <label>备案信息</label>
        <input type="text" v-model="settings.basic.icp">
      </div>
      
      <div class="form-group">
        <label>客服电话</label>
        <input type="text" v-model="settings.basic.servicePhone">
      </div>
      
      <div class="form-group">
        <label>客服邮箱</label>
        <input type="email" v-model="settings.basic.serviceEmail">
      </div>
    </div>
    
    <!-- 邮件设置 -->
    <div v-if="currentTab === 'email'" class="settings-panel">
      <h2>邮件设置</h2>
      
      <div class="form-group">
        <label>SMTP服务器</label>
        <input type="text" v-model="settings.email.smtpServer">
      </div>
      
      <div class="form-group">
        <label>SMTP端口</label>
        <input type="number" v-model="settings.email.smtpPort">
      </div>
      
      <div class="form-group">
        <label>发件人邮箱</label>
        <input type="email" v-model="settings.email.senderEmail">
      </div>
      
      <div class="form-group">
        <label>发件人名称</label>
        <input type="text" v-model="settings.email.senderName">
      </div>
      
      <div class="form-group">
        <label>SMTP用户名</label>
        <input type="text" v-model="settings.email.username">
      </div>
      
      <div class="form-group">
        <label>SMTP密码</label>
        <input type="password" v-model="settings.email.password">
      </div>
      
      <div class="form-group">
        <label>加密方式</label>
        <select v-model="settings.email.encryption">
          <option value="none">无</option>
          <option value="ssl">SSL</option>
          <option value="tls">TLS</option>
        </select>
      </div>
      
      <div class="form-group">
        <button class="test-btn" @click="testEmailSettings">测试邮件设置</button>
      </div>
    </div>
    
    <!-- 支付设置 -->
    <div v-if="currentTab === 'payment'" class="settings-panel">
      <h2>支付设置</h2>
      
      <div class="payment-method">
        <h3>支付宝</h3>
        <div class="form-group">
          <label>启用支付宝</label>
          <div class="toggle-switch">
            <input type="checkbox" id="alipay-toggle" v-model="settings.payment.alipay.enabled">
            <label for="alipay-toggle"></label>
          </div>
        </div>
        
        <div v-if="settings.payment.alipay.enabled">
          <div class="form-group">
            <label>应用ID (APPID)</label>
            <input type="text" v-model="settings.payment.alipay.appId">
          </div>
          
          <div class="form-group">
            <label>商户私钥</label>
            <textarea v-model="settings.payment.alipay.privateKey"></textarea>
          </div>
          
          <div class="form-group">
            <label>支付宝公钥</label>
            <textarea v-model="settings.payment.alipay.publicKey"></textarea>
          </div>
        </div>
      </div>
      
      <div class="payment-method">
        <h3>微信支付</h3>
        <div class="form-group">
          <label>启用微信支付</label>
          <div class="toggle-switch">
            <input type="checkbox" id="wechat-toggle" v-model="settings.payment.wechat.enabled">
            <label for="wechat-toggle"></label>
          </div>
        </div>
        
        <div v-if="settings.payment.wechat.enabled">
          <div class="form-group">
            <label>商户ID</label>
            <input type="text" v-model="settings.payment.wechat.merchantId">
          </div>
          
          <div class="form-group">
            <label>应用ID (APPID)</label>
            <input type="text" v-model="settings.payment.wechat.appId">
          </div>
          
          <div class="form-group">
            <label>API密钥</label>
            <input type="password" v-model="settings.payment.wechat.apiKey">
          </div>
          
          <div class="form-group">
            <label>API证书</label>
            <div class="file-upload">
              <button class="upload-btn">上传证书</button>
              <span v-if="settings.payment.wechat.certUploaded" class="file-name">证书已上传</span>
              <span v-else class="file-name">未上传证书</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 安全设置 -->
    <div v-if="currentTab === 'security'" class="settings-panel">
      <h2>安全设置</h2>
      
      <div class="form-group">
        <label>启用登录验证码</label>
        <div class="toggle-switch">
          <input type="checkbox" id="captcha-toggle" v-model="settings.security.enableCaptcha">
          <label for="captcha-toggle"></label>
        </div>
      </div>
      
      <div class="form-group">
        <label>密码最小长度</label>
        <input type="number" v-model="settings.security.passwordMinLength" min="6" max="20">
      </div>
      
      <div class="form-group">
        <label>密码复杂度要求</label>
        <div class="checkbox-group">
          <label>
            <input type="checkbox" v-model="settings.security.passwordRequirements.uppercase">
            必须包含大写字母
          </label>
          <label>
            <input type="checkbox" v-model="settings.security.passwordRequirements.lowercase">
            必须包含小写字母
          </label>
          <label>
            <input type="checkbox" v-model="settings.security.passwordRequirements.numbers">
            必须包含数字
          </label>
          <label>
            <input type="checkbox" v-model="settings.security.passwordRequirements.special">
            必须包含特殊字符
          </label>
        </div>
      </div>
      
      <div class="form-group">
        <label>登录失败锁定</label>
        <div class="toggle-switch">
            <input type="checkbox" id="lockout-toggle" v-model="settings.security.enableLockout">
          <label for="lockout-toggle"></label>
        </div>
      </div>
      
      <div v-if="settings.security.enableLockout" class="form-group">
        <label>失败次数锁定阈值</label>
        <input type="number" v-model="settings.security.lockoutThreshold" min="3" max="10">
      </div>
      
      <div v-if="settings.security.enableLockout" class="form-group">
        <label>锁定时间（分钟）</label>
        <input type="number" v-model="settings.security.lockoutDuration" min="5" max="60">
      </div>
      
      <div class="form-group">
        <label>会话超时时间（分钟）</label>
        <input type="number" v-model="settings.security.sessionTimeout" min="5" max="120">
      </div>
    </div>
    
    <!-- 缓存设置 -->
    <div v-if="currentTab === 'cache'" class="settings-panel">
      <h2>缓存设置</h2>
      
      <div class="form-group">
        <label>启用页面缓存</label>
        <div class="toggle-switch">
          <input type="checkbox" id="page-cache-toggle" v-model="settings.cache.enablePageCache">
          <label for="page-cache-toggle"></label>
        </div>
      </div>
      
      <div v-if="settings.cache.enablePageCache" class="form-group">
        <label>页面缓存时间（分钟）</label>
        <input type="number" v-model="settings.cache.pageCacheDuration" min="1" max="60">
      </div>
      
      <div class="form-group">
        <label>启用数据缓存</label>
        <div class="toggle-switch">
          <input type="checkbox" id="data-cache-toggle" v-model="settings.cache.enableDataCache">
          <label for="data-cache-toggle"></label>
        </div>
      </div>
      
      <div v-if="settings.cache.enableDataCache" class="form-group">
        <label>数据缓存时间（分钟）</label>
        <input type="number" v-model="settings.cache.dataCacheDuration" min="1" max="60">
      </div>
      
      <div class="form-group">
        <button class="danger-btn" @click="clearAllCache">清除所有缓存</button>
      </div>
    </div>
    
    <div class="settings-actions">
      <button class="save-btn" @click="saveSettings">保存设置</button>
      <button class="reset-btn" @click="resetSettings">重置设置</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SystemSettings',
  data() {
    return {
      currentTab: 'basic',
      tabs: [
        { id: 'basic', name: '基本设置' },
        { id: 'email', name: '邮件设置' },
        { id: 'payment', name: '支付设置' },
        { id: 'security', name: '安全设置' },
        { id: 'cache', name: '缓存设置' }
      ],
      settings: {
        basic: {
          systemName: '电商管理系统',
          logo: 'https://via.placeholder.com/200x60',
          description: '这是一个功能强大的电商管理系统，提供商品管理、订单管理、用户管理等功能。',
          copyright: '© 2023 电商管理系统 版权所有',
          icp: '京ICP备12345678号',
          servicePhone: '400-123-4567',
          serviceEmail: 'service@example.com'
        },
        email: {
          smtpServer: 'smtp.example.com',
          smtpPort: 465,
          senderEmail: 'noreply@example.com',
          senderName: '电商管理系统',
          username: 'noreply@example.com',
          password: '',
          encryption: 'ssl'
        },
        payment: {
          alipay: {
            enabled: true,
            appId: '2021000000000000',
            privateKey: '',
            publicKey: ''
          },
          wechat: {
            enabled: true,
            merchantId: '1900000000',
            appId: 'wx1234567890abcdef',
            apiKey: '',
            certUploaded: false
          }
        },
        security: {
          enableCaptcha: true,
          passwordMinLength: 8,
          passwordRequirements: {
            uppercase: true,
            lowercase: true,
            numbers: true,
            special: false
          },
          enableLockout: true,
          lockoutThreshold: 5,
          lockoutDuration: 30,
          sessionTimeout: 30
        },
        cache: {
          enablePageCache: true,
          pageCacheDuration: 10,
          enableDataCache: true,
          dataCacheDuration: 5
        }
      },
      originalSettings: null
    };
  },
  created() {
    // 保存原始设置，用于重置
    this.originalSettings = JSON.parse(JSON.stringify(this.settings));
  },
  methods: {
    saveSettings() {
      // 这里应该发送API请求保存设置
      // 实际项目中，这里会调用后端API
      
      // 模拟保存成功
      setTimeout(() => {
        alert('设置已保存');
        // 更新原始设置
        this.originalSettings = JSON.parse(JSON.stringify(this.settings));
      }, 500);
    },
    resetSettings() {
      if (confirm('确定要重置所有设置吗？所有未保存的更改将丢失。')) {
        this.settings = JSON.parse(JSON.stringify(this.originalSettings));
      }
    },
    testEmailSettings() {
      // 验证邮件设置
      if (!this.settings.email.smtpServer || !this.settings.email.senderEmail) {
        alert('请填写SMTP服务器和发件人邮箱');
        return;
      }
      
      // 模拟发送测试邮件
      alert('正在发送测试邮件...');
      setTimeout(() => {
        alert('测试邮件发送成功！');
      }, 1500);
    },
    clearAllCache() {
      if (confirm('确定要清除所有缓存吗？这可能会暂时影响系统性能。')) {
        // 模拟清除缓存
        setTimeout(() => {
          alert('所有缓存已清除');
        }, 1000);
      }
    }
  }
}
</script>

<style scoped>
.system-settings-container {
  padding: 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.settings-tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
  overflow-x: auto;
  white-space: nowrap;
}

.settings-tabs button {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
}

.settings-tabs button.active {
  border-bottom-color: #4a90e2;
  color: #4a90e2;
  font-weight: bold;
}

.settings-panel {
  margin-bottom: 30px;
}

.settings-panel h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.logo-upload {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo-preview {
  max-width: 200px;
  max-height: 60px;
  border: 1px solid #ddd;
  padding: 5px;
}

.upload-btn {
  padding: 8px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.test-btn {
  padding: 8px 15px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.danger-btn {
  padding: 8px 15px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.payment-method {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.payment-method h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.toggle-switch label:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.toggle-switch input:checked + label {
  background-color: #4a90e2;
}

.toggle-switch input:checked + label:before {
  transform: translateX(26px);
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  font-weight: normal;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  margin-right: 10px;
}

.file-upload {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-name {
  color: #666;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.save-btn {
  padding: 10px 20px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.reset-btn {
  padding: 10px 20px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

@media (max-width: 768px) {
  .settings-tabs {
    flex-wrap: wrap;
  }
  
  .settings-tabs button {
    flex: 1 0 auto;
    text-align: center;
  }
  
  .logo-upload {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .settings-actions {
    flex-direction: column;
  }
  
  .save-btn, .reset-btn {
    width: 100%;
  }
}
</style>